<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="test" /><br>
		1:<p class="test"></p><br>
		2:<p class="test"></p><br>
		3:<p class="test"></p><br>
		 <script>
      //模块
		  var testModle={
				data:"",
        //提供设置数据的方法
				setData:function(data){
					this.data=data;
					this.dataChange();
				},
        //提供获取数据的方法
				getData:function(data){
					return this.data;
				},
        //数据更改事件
				dataChange:function(){
					testView.update();
				}
			}

      //视图
			var testView={
        //初始化
				init:function(){
					document.getElementById("test").addEventListener('keyup',this.onchange);
					document.getElementById("test").addEventListener('keydown',this.onchange);
					document.getElementById("test").addEventListener('keyup',function(){
						console.log(234);
					})
				},
        //改变事件
				onchange:function(){
					testControl.putdata();
				},
        //数据更新
				update:function(){
					var ps=document.getElementsByClassName('test');
					for(var i=0;ps[i];i++){
						ps[i].innerHTML=testModle.getData();
					}
				}
			};

      //控制器
			var testControl={
        //初始化
				init:function(){
					testView.init();
				},
        //设置数值
				putdata:function(){
					testModle.setData(document.getElementById("test").value);
				}
			}

			testView.init();
		 </script>
	</body>
</html>